<!DOCTYPE html>
<html>
<head>
	<title>thinkphp的登录页面</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/main.css">
	<script type="text/javascript" src="__JS__/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="__JS__/jquery.validate.min.js"></script>
	<script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
	$("#form").validate({
		rules:{
			nick:{
				required:true
			},
			pa:{
				required:true,
				minlength:6,
				maxlength:16,
			},
			checkCode:{
				required:true,
			}
		},
		messages:{
			nick:{
				required:"<img src='__IMG__/error.png' class='err'><span>请输入用户名</span>",
			},
			pa:{
				required:"<img src='__IMG__/error.png' class='err'><span>请输入密码</span>",
				minlength:"<img src='__IMG__/error.png' class='err'><span>密码最短为6个字符</span>",
				maxlength:"<img src='__IMG__/error.png' class='err'><span>密码最长为16个字符</span>",
			},
			checkCode:{
				required:"<img src='__IMG__/error.png' class='err'><span>请输入验证码</span>",
			}
		}
	})
})
</script>
<body style="margin: 0 auto;">
<!-- 导航栏区域 -->
<div id="nav_div">
	<!-- logo -->
	<img id="logo" src="__IMG__/logo.png">
	<!-- 导航 -->
	<ul>
		<li><a href="{:url('index/index')}">首页</a></li>
		<li onmouseover="hide()" onmouseout="Hide()" style="height:60px;">
				<a href="{:url('index/view')}">论坛</a>
			</li>
		<li><a href="#">教程</a></li>
		<li><a href="#">讨论</a></li>
		<li><a href="#">博客</a></li>
		<li style="width: 65px;">
			<a href="#" style="color: #6FB737;">联系我们</a>
		</li>
		<li style="margin-right: 28px;">
			<a href="#" style="color: #43a4e9;">ThinkAPI</a>
		</li>
		<li><a href="{:url('index/logOut')}">注销</a></li>
	</ul>
	<!-- 搜索 -->
	<div>
		<form action="">
			<input type="text">
			<a href="#" class="find">搜索</a>
		</form>
		<div id="pulldown" onmouseover="pullDown()" onmouseout="pulldown()" style="left: 82%;">
			<img id="user" src="__IMG__/user.png">
			<img id="dropdown" src="__IMG__/dropdown.png">
		</div>
		<!-- 下拉框 -->
		<div id="hide_div" style="display: none;margin-left: 64px !important;margin-top: 6px !important;position: absolute;left: 82%;top: 90%;" onmouseover="pullDown()" onmouseout="pulldown()">
			<div><a href="{:url('user/login')}">登录</a></div>
			<div><a href="{:url('user/reg')}">注册</a></div>
			<div><a href="{:url('index/changePa')}">修改密码</a></div>
			<div><a href="{:url('index/me')}">上传头像</a></div>
		</div>
	</div>

	<!-- 论坛下拉框 -->
	<div id="hide" onmouseover="hide()" onmouseout="Hide()" style="display: none;">
		<div><a href="{:url('index/view')}" class="hide_href" style="padding: 5px 20px 5px 30px;">全部</a></div>
		{volist name="sec" id="secRow"}
		<div><a href="" class="hide_href">{$secRow.s_name}</a></div>
		{/volist}
	</div>
</div>

<!-- 内容区域 -->
<div id="con_div">
	<!-- 用户登录(左部区域) -->
	<div id="con_left">
		<div class="user_Fir">
			<div class="user1">用户登录</div>
			<div class="user2">
				<span>还没有账号？点击</span>
				<a href="#">注册</a>
			</div>
		</div>
		<div class="user_Sec">
			<form action="{:url('user/doLogin')}" method="post" id="form">
				<table>
					<tr>
						<td>用户名</td>
						<td><input type="text" name="nick"></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><input type="text" name="pa"></td>
					</tr>
					<tr>
						<td>验证码</td>
						<td id="replace">
							<input type="text" style="width: 100px;" name="checkCode">
							<span class="box" onclick="createcode()">
								<a href="#">换一张</a>
							</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input class="img_code" id="code" onclick="createcode()" type="button"></input>
						</td>
					</tr>
					<tr>
						<td colspan="2" class="login_td"> 
							<input id="submit" type="submit" value="登录">
							<span><a href="#">找回密码</a></span>
						</td>
					</tr>
					<tr>
						<td colspan="2" class="login_td">
							<span style="font-size:17px;">邮件激活失败？</span>
							<a href="#">重新激活</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!-- 分割线 -->
	<div id="line"></div>

	<!-- 其他方式登录（右部区域） -->
	<div id="con_right">
		<div class="right_div1">
			<p>使用其他账号直接登录</p>
		</div>
		<div>
			<ul>
				<li><a href="">腾讯QQ登录</a></li>
				<li><a href="">腾讯微博登录</a></li>
				<li><a href="">网易微博登录</a></li>
				<li><a href="">新浪微博登录</a></li>
			</ul>
		</div>
	</div>
</div>

<!-- 底部区域 -->
<div id="foot_div">
	<div class="foot_in">
		<div>
			<h3>我们</h3>
			<ul>
				<li>关于我们</li>
				<li>联系我们</li>
				<li>捐赠我们</li>
			</ul>
		</div>
		<div>
			<h3>合作</h3>
			<ul>
				<li>友情链接</li>
				<li>广告合作</li>
				<li>合作伙伴</li>
				<li>技术支持</li>
				<li>产品服务</li>
			</ul>
		</div>
		<div>
			<h3>网站</h3>
			<ul>
				<li>服务市场</li>
				<li>扩展插件</li>
				<li>开发资源</li>
				<li>教程资源</li>
			</ul>
		</div>
		<div>
			<h3>信息</h3>
			<ul>
				<li>BUG反馈</li>
				<li>技术讨论</li>
			</ul>
		</div>
		<div class="foot_end" style="margin-left: -5px;padding-right: 15px;">
			<div>
				ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。
			</div>
			<div class="foot_address" style="height: 15px!important;">
				沪ICP备12007941号-2
			</div>
			<img id="bottom_logo" src="__IMG__/logo2.png">
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
// 登录注册下拉框
	// 显示下拉框
	function pullDown(){
		var show_div = document.getElementById('hide_div');
		if (show_div.style.display == 'none') {
			show_div.style.display = 'block';
		}
	}
	// 隐藏下拉框
	function pulldown(){
		var show_div = document.getElementById('hide_div');
		if (show_div.style.display == 'block') {
			show_div.style.display = 'none';
		}
	}
	// 显示论坛下拉框
	function hide(){
		var hide=document.getElementById('hide');
		if (hide.style.display=='none') {
			hide.style.display='block';
		};

	}
	// 隐藏论坛下拉框
	function Hide(){
		var hide=document.getElementById('hide');
		if (hide.style.display=='block') {
			hide.style.display='none';
		};
	}
// 验证码
function createcode(){
	var codefir = '';
	var codelength = 4;
	var codeid = document.getElementById('code');
	var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	for(var i = 0; i < codelength; i++){
		var num = Math.floor(Math.random()*62);
		codefir += random[num];
	}
	codeid.value = codefir;
}
	window.onload = function(){
		createcode();
	}
</script>